<template>
	<view class="page">
		<view class="hed-vip">
			<view class="section">
				<view class="section-slot" :class="[current===index?'section-slot-A':'']" v-for="(option,index) in list"
					:key="index" @click="changeCurrent(index)">
					<image style=" width: 42rpx; height: 33rpx" :src="option.avatar" />
					<view class="name">{{ option.value }}</view>
				</view>
			</view>
			<view class="section2">
				<view class="jg">
					<uv-parse :content="vipInfo.describes"></uv-parse>
				</view>
				<view class="s-view-s">
					<view class="section-slot2" :class="[current2===index?'section-slot-B':'']"
						v-for="(option,index) in vipInfo.plans" :key="index" @click="changeCurrent2(index)">
						<view class="slot-box">
							<text class="name">{{ option.title }}  </text>
							<text class="name2">￥{{ option.price || 0 }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cg-list">
			<view class="cg-title">
				归属场馆选择
			</view>
			<wd-status-tip v-if="gymList.length == 0" image="/static/viewNull.png"  :image-size="{ height: 50,  width: 50}" tip="暂无场馆" />
			<view class="cg-item" v-for="(gym, index) in gymList" :key="index"
				:class="[selectedGymIndex === index ? 'cg-item-selected' : '']" @click="selectGym(index)"
			>
				<image class="bg" src="/static/img/vip_bg.png" style="width: 100%; height: 100%" />
				<view class="bg-center">
					<view class="gym-header">
						<view class="gym-name">{{ gym.name || '' }}</view>
						<view class="gym-status" :class="!gym.expireAt ? 'status-closed' : 'status-open'">
							{{ gym.expireAt ? '到期时间：'+uni.$uv.timeFormat(gym.expireAt,'yyyy-mm-dd') : '' }}
						</view>
					</view>
					<view class="gym-brand">{{ gym.detail || '' }}</view>
					<view class="gym-price">月卡: ￥{{ gym.monthPrice }}</view>
					<view class="gym-location-nav">
						<view class="gym-location">
							<wd-icon name="location" color="#fff" size="16px"></wd-icon>
							<text class="location-text line1">{{ gym.address || '' }}</text>
						</view>
						<!-- <view class="nav-btn" @click="navigateToLocation(gym)">导航
							<image src="/static/img/ddh.png" style="width:32rpx; height: 32rpx; margin-left: 8rpx" />
						</view> -->
					</view>
					<view class="gym-bottom">
						<view class="gym-count">在馆人数: {{ gym.numberAttendees || '0' }}</view>
						<view class="gym-actions">
							<!-- <view class="action-btn invite-btn">邀请</view> -->
							<view  class="action-btn open-btn" @click.stop="navigateToLocation(gym)">导航</view>
							<!-- <template v-else>
								<view class="action-btn invite-btn">邀请</view>
								<view class="action-btn purchased-btn">已购买体验</view>
							</template> -->
						</view>
					</view>
					<!-- 选中状态遮罩和指示器 -->
				<view class="selected-overlay" v-if="selectedGymIndex === index">
					<!-- <view class="selected-badge">
						<wd-icon name="check-outline" color="#fff" size="20px"></wd-icon>
						<text class="selected-text">已选择</text>
					</view> -->
				</view>
				
				<!-- 选中状态边框装饰 -->
				<view class="selected-border" v-if="selectedGymIndex === index"></view>
				</view>
			</view>
		</view>
		<view class="buttonSub" v-if="selectedGymInfo.buttonText">
			<div class="customBtu" :class="{'disabled':selectedGymInfo.buttonStatus != 1}" @click="toPay(selectedGymInfo)">{{selectedGymInfo.buttonText}}</div>
		</view>

		<view class="fw-list">
			<view class="fw-title">
				{{vipInfo.rightsName || ''}}
			</view>
			<view class="card">
				<image :src="vipInfo.rightsImage" style="width: 100%" mode="aspectFill" />
			</view>
			<wd-divider></wd-divider>
		</view>
		<view style="background: #fff;padding-bottom: 40rpx;">
			<wd-cell title="隐私条款"  is-link to="/pagesA/view/rich/index?title=隐私条款&url=https://api-v3.changepro.vip/vip-privacy-policy.html" />
			<wd-cell title="服务协议"  is-link to="/pagesA/view/rich/index?title=服务协议&url=https://api-v3.changepro.vip/user-agreement.html" />
		</view>
	</view>
	 <wd-backtop :scrollTop="scrollTop"> </wd-backtop>
	 <fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
</template>

<script setup>
	import uvParse from '@/components/uv-parse/components/uv-parse/uv-parse.vue'
	//分享到朋友圈
	 onShareTimeline(async ()=>{
		return {
			title: "ChangePro",
			path: '/pages/index/index',
			desc: 'Change Pro-健身健美文化社区',
		}
	})
	const loadActive = ref(false);
	const vipInfo = ref({});
	const scrollTop = ref(0);
	const list = ref([{
			value: 'Change会员',
			avatar: '/static/img/vip_tag2.png'
		},
		{
			value: 'Change通卡',
			avatar: '/static/img/vip_tag1.png'
		}
	])
	const listVip = ref([{
			value: '一年',
			num: 500,
		},
		{
			value: '一次',
			num: 400,
		},
		{
			value: '30天',
			num: 300,
		},
		{
			value: '30天',
			value2: '(含游泳)',
			num: 300,
		},
	])
	
	// 场馆列表数据
	const gymList = ref([])
	
	const current = ref(0);
	const current2 = ref(0);
	const changeVipInfo = ref({});//选择的vip套餐
	// 场馆选中索引，默认选择第一个
	const selectedGymIndex = ref(0);
	const selectedGymInfo = ref({});//选择的场馆
	
	onPageScroll((e) => {
	  scrollTop.value = e.scrollTop
	})
	// 切换
	const changeCurrent = (index) => {
		if (index === 1) {
			uni.showToast({
				title: '敬请期待',
				icon: 'none'
			});
			return
		}
		current.value = index;
	}
	// 切换
	const changeCurrent2 = (index) => {
		current2.value = index;
		changeVipInfo.value = vipInfo.value.plans[index];
		selectedGymIndex.value = 0;
		getList();
	}
	
	// 选择场馆方法
	const selectGym = (index) => {
		selectedGymIndex.value = index;
		selectedGymInfo.value = gymList.value[index];
		console.log(selectedGymInfo.value);

		
		
		// 可以在这里添加其他逻辑，比如更新价格显示等
	}
	// 获取当前选中的场馆信息
	const getSelectedGym = () => {
		return gymList.value[selectedGymIndex.value];
	}
	
	// 设置选中的场馆
	const setSelectedGym = (index) => {
		if (index >= 0 && index < gymList.value.length) {
			selectedGymIndex.value = index;
		}
	}
	// 选择场馆方法
	const toPay = async (item) => {
		if(item.buttonStatus==1){//可以点击
			if(changeVipInfo.value.type != 3){ //不等于3 年卡
				const res = await uni.api.getChangeApplyDetail();
				if (res.code == 0 && res.data?.faceUrl) {//有资料拿取 signFlowId
					const res2 = await uni.api.createChangeApply({
						name: res.data.name || '',
						phone: res.data.phone || '',
						idcard: res.data.idcard || '',
						sex: res.data.sex || '',
						urgentLinker: res.data.urgentLinker || '',
						birth: res.data.birth || '',
						career: res.data.career || '',
						nationality: res.data.nationality || '',
						email: res.data.email || '',
						address: res.data.address || '',
						hasOldFaceImg: res.data?.faceImgUrl?1:0,
						faceImgUrl: res.data?.faceUrl,
						venueId: item.id,
						planType: changeVipInfo.value.type,
						isWxLite:1,
					});
					if(res2.code==0 && res2.data?.signFlowId){
						const params = {
							  venueId: item.id,
							  planType: changeVipInfo.value.type,
							  signFlowId: res2.data?.signFlowId,
						}
						uni.navigateTo({
							url:`/pagesA/view/openVip/pay?params=${JSON.stringify(params)}`
						})
						
					}else{
						uni.navigateTo({
							url: `/pagesA/view/openVip/dataVip?planType=${changeVipInfo.value.type}&venueId=${item.id}`
						});
					}
					
				}else{//不是年卡 但没资料 进入信息
					uni.navigateTo({
						url: `/pagesA/view/openVip/dataVip?planType=${changeVipInfo.value.type}&venueId=${item.id}`
					});
				}
			}else{ //是年卡 -- 进入信息
				uni.navigateTo({
					url: `/pagesA/view/openVip/dataVip?planType=${changeVipInfo.value.type}&venueId=${item.id}`
				});
			}
		}else{
			uni.showToast({
				title: item.buttonTips,
				icon: 'none'
			});

		}
	}
	// 导航
	 const navigateToLocation = (gym) => {
		uni.openLocation({
			latitude: Number(gym.lat),
			longitude: Number(gym.lng),
			name: gym.name,
			address: gym.address
		})
	}
	// 获取场馆列表
	const getList = (init = false) => {
		if(init){
			loadActive.value = true;
		}
		uni.api.myVenueOpenList({
			planType:changeVipInfo.value.type
		}).then(res => {
			if(res.code==0){
				gymList.value = res?.data || [];
				selectedGymIndex.value = 0;
				selectedGymInfo.value = gymList.value[0] || {};
			}
		}).catch(err => {
			console.log(err);
		}).finally(() => {
			loadActive.value = false;
		})
	}

	onShow(() => {
		uni.api.vip().then(res => {
			if(res.code==0){
				vipInfo.value = res?.data?.members[3] || {}; 
				if(!changeVipInfo.value?.id){
					changeVipInfo.value = res?.data?.members[3].plans[0];
				}
				getList(true);
			}
		})

	})
</script>

<style lang="scss" scoped>
	.page {
		background-color: #ebebeb;
		min-height: calc(100vh - 44px);
	}

	.section-Class {
		border-radius: 0;
	}

	:deep(.wd-segmented__item--active) {
		border: 2rpx solid #d8d8d8 !important;
	}

	.hed-vip {
		background: #ffffff;
		padding-bottom: 40rpx;

		.section {
			box-sizing: border-box;
			display: flex;
			align-items: flex-end;
			padding: 20rpx;

			.section-slot {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				height: 72rpx;
				border: 2rpx solid #E9E9E9;
				border-bottom: none;
				border-radius: 12rpx 12rpx 0 0;
				background: #f6f6f6;

				.name {
					font-size: 28rpx;
					color: #444444;
					margin-left: 10rpx;
				}
			}

			.section-slot-A {
				padding-top: 14rpx;
				background: #fff;
			}
		}

		.section2 {
			.jg {
				font-size: 26rpx;
				padding: 0 20rpx;
				margin: 20rpx 0 0 0;
			}

			.s-view-s {
				display: flex;
				padding: 0 20rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				gap: 15rpx;

				.section-slot2 {
					flex: 1;
					text-align: center;
					height: 200rpx;
					border: 2rpx solid #D2D2D2;
					border-radius: 12rpx;

					.slot-box {
						display: flex;
						flex-direction: column;
						align-items: start;
						height: 100%;
						justify-content: center;
						padding: 0 4rpx;
					}

					.name {
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						padding-left: 8rpx;
						padding-bottom: 8rpx;
					}

					.name2 {
						background: -webkit-linear-gradient(0deg, #774101 0%, #E57C00 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						color: transparent;
						/* 确保文字本身不显示颜色 */
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.section-slot-B {
					background: #fffaf1;
					border: 2rpx solid #C99439;
				}
			}
		}
	}

	.cg-list {
		width: 690rpx;
		background: #f3f3f3;
		padding: 30rpx 25rpx;
		border-radius: 12rpx;
		min-height: 100rpx;
		box-sizing: border-box;
		margin: 40rpx auto;

		.cg-title {
			color: #3d2961;
			font-size: 28rpx;
			padding-bottom: 16rpx;
		}

		.cg-item {
			width: 630rpx;
			position: relative;
			margin-top: 20rpx;
			cursor: pointer;
			transition: all 0.3s ease;
			border-radius: 12rpx;
			overflow: hidden;
			.bg {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				border-radius: 12rpx;
			}

			.bg-center {
				position: relative;
				z-index: 10;
				color: #fff;
				padding: 20rpx 30rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.gym-header {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-bottom: 8rpx;

					.gym-name {
						font-size: 26rpx;
						font-weight: 500;
						color: #fff;
						flex: 1;
					}

					.gym-status {
						font-size: 20rpx;
						color: #fff;
						text-align: right;
						min-width: 120rpx;

						&.status-closed {
							color: #fff;
						}

						&.status-open {
							color: #fff;
						}
					}
				}

				.gym-brand {
					font-size: 32rpx;
					margin: 10rpx 0;
					color: #fff;
				}

				.gym-price {
					font-size: 26rpx;
					margin-bottom: 8rpx;
					color: #fff;
				}

				.gym-location-nav {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.gym-location {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #fff;
						flex: 1;

						.location-text {
							margin-left: 2rpx;
						}
					}

					.nav-btn {
						font-size: 22rpx;
						color: #fff;
						display: flex;
						align-items: center;
					}
				}

				.gym-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.gym-count {
						font-size: 24rpx;
						color: #fff;
					}

					.gym-actions {
						display: flex;
						align-items: center;
						gap: 16rpx;
						font-size: 24rpx;
						position: relative;
						z-index: 20; // 确保按钮在遮罩层之上

						.action-btn {
							padding: 8rpx 20rpx;
							border-radius: 20rpx;
							text-align: center;
							min-width: 80rpx;
							font-size: 22rpx;
							cursor: pointer;
							transition: all 0.3s ease;

							&.invite-btn {
								background-color: rgba(255, 255, 255, 0.2);
								color: #fff;
								border: 1rpx solid rgba(255, 255, 255, 0.3);
							}

							&.open-btn {
								background-color: rgba(255, 255, 255, 0.9);
								color: #333;
								font-weight: 500;
							}

							&.purchased-btn {
								background-color: rgba(76, 175, 80, 0.8);
								color: #fff;
							}
						}
					}
				}
			}

			// 选中状态遮罩
			.selected-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 15;
				background: linear-gradient(135deg, 
					rgba(172, 137, 77, 0.15) 0%, 
					rgba(172, 137, 77, 0.25) 100%);
				border-radius: 12rpx;
				display: flex;
				align-items: flex-start;
				justify-content: flex-end;
				padding: 20rpx;
				pointer-events: none; // 让遮罩层不阻止点击事件
				
				.selected-badge {
					background: linear-gradient(135deg, #AC894D 0%, #D7C2A2 100%);
					border-radius: 30rpx;
					padding: 8rpx 16rpx;
					display: flex;
					align-items: center;
					box-shadow: 0 4rpx 12rpx rgba(172, 137, 77, 0.4);
					animation: selectedPulse 2s ease-in-out infinite;
					
					.selected-text {
						color: #fff;
						font-size: 22rpx;
						font-weight: 500;
						margin-left: 6rpx;
					}
				}
			}
			
			// 选中状态边框装饰
			.selected-border {
				position: absolute;
				top: -4rpx;
				left: -4rpx;
				right: -4rpx;
				bottom: -4rpx;
				z-index: 5;
				border: 4rpx solid transparent;
				border-radius: 16rpx;
				background: linear-gradient(135deg, #AC894D, #D7C2A2, #AC894D) border-box;
				-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
				-webkit-mask-composite: exclude;
				mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
				mask-composite: exclude;
				animation: borderGlow 3s ease-in-out infinite;
			}
		}

		// 选中状态样式
		.cg-item-selected {
			transform: scale(1.03);
			box-shadow: 0 12rpx 32rpx rgba(172, 137, 77, 0.25);
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

			.bg {
				filter: brightness(1.05) saturate(1.1);
			}
		}
	}

	// 动画效果
	@keyframes selectedPulse {
		0%, 100% {
			transform: scale(1);
			box-shadow: 0 4rpx 12rpx rgba(172, 137, 77, 0.4);
		}
		50% {
			transform: scale(1.05);
			box-shadow: 0 6rpx 16rpx rgba(172, 137, 77, 0.6);
		}
	}

	@keyframes borderGlow {
		0%, 100% {
			opacity: 0.8;
		}
		50% {
			opacity: 1;
		}
	}

	.buttonSub {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx 0;
		.customBtu{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 690rpx;
			height: 90rpx;
			background: radial-gradient( 0% 0% at 0% 0%, #AC894D 0%, #D7C2A2 0%);
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			font-size: 34rpx;
			color: #FFFFFF;
		}
		.disabled{
			background: #b2b2b2;
		}
	}


	.fw-list {
		background: #fff;
		padding: 20rpx 30rpx;

		.fw-title {
			font-weight: 500;
			margin-bottom: 40rpx;
		}

		.card {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding: 20rpx;
			
			.card_t {
				width: 540rpx;

				.t1 {
					font-size: 30rpx;
					font-weight: 500;
					margin-bottom: 10rpx;
				}

				.t2 {
					font-size: 26rpx;
					color: #b2b2b2;
				}
			}
		}
	}
</style>